<script setup lang="ts">
import { MinusOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { h, reactive, ref } from "vue";

// #region table
// 列定义
const columns = [
  { title: "测点ID", dataIndex: "id", key: "id", width: 90, align: "center" },
  { title: "测点名称", dataIndex: "loop", key: "loop", align: "center" },
  { title: "区域", dataIndex: "area", key: "area", align: "center" },
  { title: "监测站", dataIndex: "room", key: "room", align: "center" },
  {
    title: "组织单元",
    dataIndex: "unit",
    key: "unit",
    width: 100,
    align: "center",
  },
];

const tableData = ref([
  {
    id: "001",
    loop: "回路：1#低压总进线",
    area: "北区",
    room: "配电室A",
    unit: "生产部",
  },
  {
    id: "002",
    loop: "回路：2#变压器输出",
    area: "南区",
    room: "配电室B",
    unit: "管理部",
  },
]);

const add = () => {
  open.value = true;
};

// #endregion table

// #region modal

const open = ref<boolean>(false);
const handleOk = () => {
  open.value = false;
};
const labelCol = { style: { width: "100px" } };
const wrapperCol = { span: 14 };

const formState = reactive({
  id: "",
  loop: "",
  area: "",
  room: "",
  unit: "",
});
// #endregion modal

// #region form
const formData = reactive({
  id: "",
  type: "",
  protocol: "",
  frequency: "",
});
// #endregion form
</script>

<template>
  <div class="container">
    <div class="table-content">
      <div class="buttons">
        <a-button type="primary" size="small" :icon="h(PlusOutlined)" @click="add"
          >新增监测点</a-button
        >
        <a-button type="primary" danger size="small" :icon="h(MinusOutlined)"
          >删除监测点</a-button
        >
      </div>
      <a-card title="已配置的监测点列表">
        <a-table :columns="columns" :data-source="tableData" rowKey="id">
          <!-- <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'link'">
                <a> 链接 </a>
                <a>下载</a>
              </template>
            </template> -->
        </a-table>
      </a-card>
    </div>

    <div class="form-content">
      <a-card title="计量装置配置" class="measurement">
        <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="监测点ID">
            <a-input v-model:value="formData.id" />
          </a-form-item>

          <a-form-item label="计量装置类型">
            <a-select v-model:value="formData.type" @focus="focus" @change="handleChange">
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="传输协议">
            <a-select
              v-model:value="formData.protocol"
              @focus="focus"
              @change="handleChange"
            >
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select></a-form-item
          >

          <a-form-item label="数据传输频率">
            <a-input v-model:value="formData.frequency"
          /></a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">确认</a-button>
            <a-button type="primary" html-type="submit">取消</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <a-modal v-model:open="open" title="编辑监测点配置" @ok="handleOk">
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="测点ID">
          <a-input v-model:value="formState.id" />
        </a-form-item>

        <a-form-item label="测点名称">
          <a-input v-model:value="formState.loop" />
        </a-form-item>

        <a-form-item label="区域选择">
          <a-select v-model:value="formState.area" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="监测站选择">
          <a-select v-model:value="formState.room" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select></a-form-item
        >

        <a-form-item label="组织单元选择">
          <a-select v-model:value="formState.unit" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select></a-form-item
        >
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.container {
  display: flex;
}
.table-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 0 5px;
}

.form-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 0 5px;
}

button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.ant-card {
  min-height: 80vh;
}

.measurement {
  min-height: 83.2vh;
}
</style>
